<!doctype html><html><head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>A canvas fontFamily example</title>

<script src="../uuCanvas.js"></script>

<script>
function xcanvas() {
    drawShape(document.getElementById('slcanvas'), 0, "blue");
    drawShape(document.getElementById('vmlcanvas'), 0, "green");
    drawShape(document.getElementById('flashcanvas'), 0, "red");
}
function matrix() {
    drawShape(document.getElementById('slcanvas'), 1, "blue");
    drawShape(document.getElementById('vmlcanvas'), 1, "green");
    drawShape(document.getElementById('flashcanvas'), 1, "red");
}
var textAlign = "left";
var offsetX = 10;

function switchAlign() {
    switch (textAlign) {
    case "left":    offsetX = 200; textAlign = "center"; break;
    case "center":  offsetX = 300; textAlign = "right"; break;
    case "right":   offsetX =  10; textAlign = "left";
    }
    drawShape(document.getElementById('slcanvas'), 0, "blue");
    drawShape(document.getElementById('vmlcanvas'), 0, "green");
    drawShape(document.getElementById('flashcanvas'), 0, "red");
}

function drawShape(canvas, matrix, color){
    if (!canvas.getContext){ return; }

    var ctx = canvas.getContext('2d');

    ctx.clear();
    if (matrix) {
        ctx.translate(-10, 5);
        ctx.scale(1.2, 0.8);
        ctx.rotate(5 * Math.PI / 180);
    }
    var w = 450, h = 800;

    grid(ctx, w, h, 10, 5, "SkyBlue", "steelblue");

    ctx.textBaseline = "top";
    ctx.textAlign = textAlign;
    ctx.fillStyle = color;

    var y = 10;
    var ary = [
        "24pt Arial"                 , "24pt Arial"                 ,
        "24pt 'Arial Black'"         , "24pt 'Arial Black'"         ,
        "24pt 'Comic Sans MS'"       , "24pt 'Comic Sans MS'"       ,
        "24pt 'Courier New'"         , "24pt 'Courier New'"         ,
        "24pt 'Lucida Grande'"       , "24pt 'Lucida Grande'"       ,
        "24pt 'Lucida Sans Unicode'" , "24pt 'Lucida Sans Unicode'" ,
        "24pt 'Times New Roman'"     , "24pt 'Times New Roman'"     ,
        "24pt 'Trebuchet MS'"        , "24pt 'Trebuchet MS'"        ,
        "24pt Verdana"               , "24pt Verdana"               ,
        "24pt helvetica"             , "24pt helvetica"             ,
        "24pt HiraKakuPro-W3"        , "24pt HiraKakuPro-W3"        ,
        "24pt 'MS UI Gothic'"        , "24pt 'MS UI Gothic'"        ,
        "24pt 'MS PGothic'"          , "24pt 'MS PGothic'"          ,
        "24pt 'メイリオ'"            , "24pt 'メイリオ'"            ,
        "24pt hoge,impact"           , "24pt hoge,impact"
    ];
    var i = 0, iz = ary.length;
    for (; i < iz; i += 2) {
        ctx.font = ary[i];
        ctx.fillText(ary[i + 1], offsetX, y);
        y += 50;
    }
}
function grid(ctx, w, h, size, unit, color, color2) {
    var x, y, i, j;
    for (i = 0, x = size; x < w; ++i, x += size) {
        ctx.beginPath();
        ctx.strokeStyle = (i % unit) ? color : color2;
        ctx.moveTo(x, 0);
        ctx.lineTo(x, h);
        ctx.stroke();
        ctx.closePath();
    }
    for (j = 0, y = size; y < h; ++j, y += size) {
        ctx.beginPath();
        ctx.strokeStyle = (j % unit) ? color : color2;
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
        ctx.stroke();
        ctx.closePath();
    }
}
</script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica; background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 1px; margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>
  <body>
    <h1>A canvas <code>fontFamily</code> example</h1>
    <div>
      <input type="button" value="matrix effect" onclick="matrix()" />
      <input type="button" value="left/center/right" onclick="switchAlign()" />
      <br />
      <canvas id="slcanvas" class="sl" width="400" height="800"></canvas>
      <canvas id="vmlcanvas" class="vml" width="400" height="800"></canvas>
      <canvas id="flashcanvas" class="flash" width="400" height="800"></canvas>
      <pre>
&lt;canvas id="slcanvas" class="sl" width="450" height="800"&gt;&lt;/canvas&gt;
&lt;canvas id="vmlcanvas" class="vml" width="450" height="800"&gt;&lt;/canvas&gt;
&lt;canvas id="flashcanvas" class="flash" width="450" height="800"&gt;&lt;/canvas&gt;

function xcanvas() {
    drawShape(document.getElementById('slcanvas'), 0, "blue");
    drawShape(document.getElementById('vmlcanvas'), 0, "green");
    drawShape(document.getElementById('flashcanvas'), 0, "red");
}
function matrix() {
    drawShape(document.getElementById('slcanvas'), 1, "blue");
    drawShape(document.getElementById('vmlcanvas'), 1, "green");
    drawShape(document.getElementById('flashcanvas'), 1, "red");
}
function drawShape(canvas, matrix, color){
    if (!canvas.getContext){ return; }

    var ctx = canvas.getContext('2d');

    if (matrix) {
        ctx.clear();
        ctx.translate(-10, 5);
        ctx.scale(1.2, 0.8);
        ctx.rotate(5 * Math.PI / 180);
    }
    var w = 450, h = 800;

    grid(ctx, w, h, 10, 5, "SkyBlue", "steelblue");

    ctx.textBaseline = "top";
    ctx.fillStyle = color;

    var y = 10;
    var ary = [
        "24pt Arial"                 , "24pt Arial"                 ,
        "24pt 'Arial Black'"         , "24pt 'Arial Black'"         ,
        "24pt 'Comic Sans MS'"       , "24pt 'Comic Sans MS'"       ,
        "24pt 'Courier New'"         , "24pt 'Courier New'"         ,
        "24pt 'Lucida Grande'"       , "24pt 'Lucida Grande'"       ,
        "24pt 'Lucida Sans Unicode'" , "24pt 'Lucida Sans Unicode'" ,
        "24pt 'Times New Roman'"     , "24pt 'Times New Roman'"     ,
        "24pt 'Trebuchet MS'"        , "24pt 'Trebuchet MS'"        ,
        "24pt Verdana"               , "24pt Verdana"               ,
        "24pt helvetica"             , "24pt helvetica"             ,
        "24pt HiraKakuPro-W3"        , "24pt HiraKakuPro-W3"        ,
        "24pt 'MS UI Gothic'"        , "24pt 'MS UI Gothic'"        ,
        "24pt 'MS PGothic'"          , "24pt 'MS PGothic'"          ,
        "24pt 'メイリオ'"            , "24pt 'メイリオ'"            ,
        "24pt hoge,impact"           , "24pt hoge,impact"
    ];
    var i = 0, iz = ary.length;
    for (; i &lt; iz; i += 2) {
        ctx.font = ary[i];
        ctx.fillText(ary[i + 1], 10, y);
        y += 50;
    }
}
function grid(ctx, w, h, size, unit, color, color2) {
    var x, y, i, j;
    for (i = 0, x = size; x &lt; w; ++i, x += size) {
        ctx.beginPath();
        ctx.strokeStyle = (i % unit) ? color : color2;
        ctx.moveTo(x, 0);
        ctx.lineTo(x, h);
        ctx.stroke();
        ctx.closePath();
    }
    for (j = 0, y = size; y &lt; h; ++j, y += size) {
        ctx.beginPath();
        ctx.strokeStyle = (j % unit) ? color : color2;
        ctx.moveTo(0, y);
        ctx.lineTo(w, y);
        ctx.stroke();
        ctx.closePath();
    }
}
      </pre>
    </div>
  </body>
</html>

